/**
 * Copyright (C) <2023> <Boundivore> <boundivore@foxmail.com>
 * <p>
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the Apache License, Version 2.0
 * as published by the Apache Software Foundation.
 * <p>
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Apache License, Version 2.0 for more details.
 * <p>
 * You should have received a copy of the Apache License, Version 2.0
 * along with this program; if not, you can obtain a copy at
 * http://www.apache.org/licenses/LICENSE-2.0.
 */
import { useRef, useState } from 'react';
import { Card, Flex, Space, Typography, Button } from 'antd';
import { MessageInstance } from 'antd/es/message/interface';
import { t } from 'i18next';
import { useConfigState } from '../hooks/useConfigState';
import { useFileContent } from '../hooks/useFileContent';
import DownloadConfig from './downloadConfig';
import Rollback from './rollbackConfig';
import useNavigater from '@/hooks/useNavigater';
import CodeEditor from './codeEditor';
import ThemeToggle from '@/components/themeToggle';
import FullScreenButton from '@/components/fullScreenButton';
const { Paragraph } = Typography;
interface FileContentProps {
	messageApi: MessageInstance;
	callback: () => void;
}
export const FileContent: React.FC<FileContentProps> = ({ messageApi, callback }) => {
	const { configPath, codeVersion, activeTab, codeEdit, currentGroupIndex, editorRef } = useConfigState();
	const { navigateToService } = useNavigater();
	const { saveChange } = useFileContent(messageApi);
	const containerRef = useRef(null);
	const [isFullScreen, setIsFullScreen] = useState(false);
	const [isDarkMode, setIsDarkMode] = useState(() => {
		return localStorage.getItem('theme') === 'dark';
	});
	return (
		<Card
			title={
				<Flex vertical={true}>
					<Space className="pt-[15px] pb-[10px]">
						<Paragraph className="mb-0 text-[16px]" copyable>
							{configPath}
						</Paragraph>
						<span>
							{t('version')}
							{codeVersion}
						</span>
					</Space>
					<Flex justify="space-between">
						<Space className="pb-[10px]">
							<Button type="primary" onClick={() => saveChange()}>
								{t('save')}
							</Button>
							<DownloadConfig buttonText="下载当前配置文件" fileList={configPath} />
							<Rollback
								fileName={activeTab.substring(activeTab.lastIndexOf('/') + 1)}
								messageApi={messageApi}
								callback={callback}
							/>
							<Button onClick={navigateToService}>{t('back')}</Button>
						</Space>
						{/* <Space> */}
						<ThemeToggle onChange={setIsDarkMode} className="relative right-[80px] bottom-2" />
						{/* <FullScreenButton containerRef={containerRef} isFullScreen={isFullScreen} setIsFullScreen={setIsFullScreen} /> */}
						{/* </Space> */}
					</Flex>
				</Flex>
			}
		>
			<div ref={containerRef} className={`${isDarkMode ? 'bg-[#1e1e1e]' : 'bg-white'}`}>
				<Flex justify="flex-end" className={`${!isFullScreen && 'absolute top-[50px] right-0'}`}>
					<FullScreenButton containerRef={containerRef} isFullScreen={isFullScreen} setIsFullScreen={setIsFullScreen} />
				</Flex>
				<CodeEditor ref={editorRef} isFullScreen={isFullScreen} data={codeEdit} index={currentGroupIndex} darkMode={isDarkMode} />
			</div>
		</Card>
	);
};
